
        

            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <h1><i class="fa fa-table"></i> Data Tables</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li class="active">Data Tables</li>
                        </ol>
                    </div>
                </div>
            </div>
            
        <div class="ajax-container">
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Basic Table</h2>
                        </div>
                        <div class="panel-body no-padding">
                            <table id="basic-table" class="table no-search no-pagination">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Table with Border, Stripes and Hover Effect</h2>
                        </div>
                        <div class="panel-body no-padding">

                            <table id="dynamic-bordered" class="table table-bordered table-striped table-hover no-pagination no-search">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Table with Emphasis</h2>
                        </div>
                        <div class="panel-body no-padding">

                            <table id="dynamic-emphasis" class="table table-striped table-bordered table-hover no-pagination no-search">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr class="active">
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr class="success">
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr class="warning">
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr class="danger">
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Table with Info</h2>
                        </div>
                        <div class="panel-body no-padding">
                            <div class="guideline table-guideline bg-info">
                                <i class="fa fa-info-circle"></i> Table Information.
                            </div>
                            <table id="dynamic-guideline" class="table table-striped table-bordered order-column table-hover no-search no-pagination">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Compact Table</h2>
                        </div>
                        <div class="panel-body no-padding">

                            <table id="dynamic-condensed" class="table table-striped table-bordered table-condensed no-search no-pagination">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Table with Search and Pagination</h2>
                        </div>
                        <div class="panel-body no-padding">
                            <table id="dynamic-table" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>
 
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Table with Controls</h2>
                        </div>
                        <div class="panel-body no-padding">

                            <div class="pull-left">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Edit</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button>
                                </div>
                            </div>
                            
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        Show
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Active</a></li>
                                        <li><a href="#">Inactive</a></li>
                                        <li><a href="#">Archived</a></li>
                                    </ul>
                                </div>
                            </div>
                            
                            <table id="dynamic-controls" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                    </tr>
                                    <tr>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                    </tr>
                                    <tr>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                    </tr>
                                    <tr>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                    </tr>
                                    <tr>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="pull-left">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Edit</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                                <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-table"></i> Table with CRUD</h2>
                        </div>
                        <div class="panel-body no-padding">

                            <div class="pull-left">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Edit</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button>
                                </div>
                            </div>
                            
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        Show
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Active</a></li>
                                        <li><a href="#">Inactive</a></li>
                                        <li><a href="#">Archived</a></li>
                                    </ul>
                                </div>
                            </div>
                            
                            <table id="dynamic-crud" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th class="align-center"><input type="checkbox" class="check-all" data-check="record" /></th>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                        <th class="align-center">Status</th>
                                        <th class="align-center">Options</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                        <th class="align-center"></th>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                        <th class="align-center">Status</th>
                                        <th class="align-center">Options</th>
                                    </tr>
                                </tfoot>

                                <tbody>
                                    <tr>
                                        <td class="align-center"><input type="checkbox" name="record" /></td>
                                        <td>Tiger Nixon</td>
                                        <td>System Architect</td>
                                        <td>Edinburgh</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <td>$320,800</td>
                                        <td class="align-center">
                                            <span class="label label-default">Default</span>
                                        </td>
                                        <td class="align-center">
                                            <div class="btn-group">
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i></a>
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-center"><input type="checkbox" name="record" /></td>
                                        <td>Garrett Winters</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>63</td>
                                        <td>2011/07/25</td>
                                        <td>$170,750</td>
                                        <td class="align-center">
                                            <span class="label label-info">Info</span>
                                        </td>
                                        <td class="align-center">
                                            <div class="btn-group">
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i></a>
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-center"><input type="checkbox" name="record" /></td>
                                        <td>Ashton Cox</td>
                                        <td>Junior Technical Author</td>
                                        <td>San Francisco</td>
                                        <td>66</td>
                                        <td>2009/01/12</td>
                                        <td>$86,000</td>
                                        <td class="align-center">
                                            <span class="label label-primary">Primary</span>
                                        </td>
                                        <td class="align-center">
                                            <div class="btn-group">
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i></a>
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-center"><input type="checkbox" name="record" /></td>
                                        <td>Cedric Kelly</td>
                                        <td>Senior Javascript Developer</td>
                                        <td>Edinburgh</td>
                                        <td>22</td>
                                        <td>2012/03/29</td>
                                        <td>$433,060</td>
                                        <td class="align-center">
                                            <span class="label label-success">Success</span>
                                        </td>
                                        <td class="align-center">
                                            <div class="btn-group">
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i></a>
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-center"><input type="checkbox" name="record" /></td>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                        <td class="align-center">
                                            <span class="label label-warning">Warning</span>
                                        </td>
                                        <td class="align-center">
                                            <div class="btn-group">
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i></a>
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-center"><input type="checkbox" name="record" /></td>
                                        <td>Airi Satou</td>
                                        <td>Accountant</td>
                                        <td>Tokyo</td>
                                        <td>33</td>
                                        <td>2008/11/28</td>
                                        <td>$162,700</td>
                                        <td class="align-center">
                                            <span class="label label-danger">Danger</span>
                                        </td>
                                        <td class="align-center">
                                            <div class="btn-group">
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i></a>
                                                <a href="javascript:void(0)" class="btn btn-default btn-xs"><i class="fa fa-trash-o"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="pull-left">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i> Edit</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $('.check-all').on('click', function(){
                                    var record = $(this).data('check');
                                    if( $(this).prop('checked') ) {
                                        $('input[name=' +record+ ']').prop('checked', true);
                                    } else {
                                        $('input[name=' +record+ ']').attr('checked', false);
                                    }
                                });
                            </script>

                        </div>
                    </div>
                </div>
            </section>
            <!-- page-script -->
            <script type="text/javascript" src="<?= base_url() ?>js/scripts/table-dynamic.js"></script>
        </div>
        